<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<title>vue prop 验证</title>
</head>
<body>
	<div id="app1">
		<my-component v-bind:prop-a=123 prop-c="xyz"></my-component>
	</div>
</body>
</html>
<script type="text/javascript">
	
	Vue.component('my-component',{

		props: {
		    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
		    propA: Number,
		    // 多个可能的类型
		    propB: [String, Number],
		    // 必填的字符串
		    propC: {
		      type: String,
		      required: true
		    },
		    // 带有默认值的数字
		    propD: {
		      type: Number,
		      default: 100
		    },
		    // 带有默认值的对象
		    propE: {
		      type: Object,
		      // 对象或数组默认值必须从一个工厂函数获取
		      default: function () {
		        return { message: 'hello' }
		      }
		    },
		    // 自定义验证函数
		    propF: {
		      validator: function (value) {
		        // 这个值必须匹配下列字符串中的一个
		        return ['success', 'warning', 'danger'].indexOf(value) !== -1
		      }
		    },
	  	},
  		template:'<h1>{{propA}}--{{propC}}</h1>',
  	});

	var app=new Vue({
		el:'#app1',
		data:{
			propA:123,
			propC:"abc",
		}
	})
</script>